<script lang="ts">
// pnpm install viewerjs
import {defineComponent, markRaw} from 'vue'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import {useCacheImg} from "@/store/modules/cacheImg";
export default defineComponent({
  name: "ViewerImgs",
  props: {
    imgsList: {
      type:Array,
      default: ()=>[]
    },
    imgsNameList: {
      type:Array,
      default: ()=>[]
    },
    showLimit:{
      type: Number,
      default:()=>20
    },
  },
  data() {
    return {
      viewerInstance: null as Viewer,
      showIndex: 0, // imgsList现在显示的位置
    }
  },
  computed: {
    centerIndex() { // showLimit的中心数字
      return Math.ceil(this.showLimit / 2)
    },
    start() {
      let centerIndex = this.centerIndex
      if(this.showIndex < centerIndex) {
        return 0;
      } else if(this.showIndex + centerIndex > this.imgsList.length - 1){
        return this.imgsList.length - this.showLimit
      } else {
        return this.showIndex - centerIndex
      }
    },
    end() {
      return this.start + this.showLimit
    },
    showImgsList() {
      return this.imgsList.slice(this.start,this.end)
    }
  },
  beforeUnmount() {
    if(this.viewerInstance) {
      this.viewerInstance.destroy()
    }
  },
  emits:[
    'hide', // 隐藏控件触发
    'show', // 显示控件触发
    'view', // 切换图片触发
  ],
  mounted() {
    if(!this.viewerInstance) {
      // 可以选择将新实例存储在HTML元素的.viewer属性中，以供将来引用
      // 设置 viewerInstance 值不进行响应式 markRaw
      this.viewerInstance = markRaw(new Viewer(this.$refs.ulRef, { // 创建新的实例
        button: true,
        inline: false,
        zoomable: true,
        movable: true,
        navbar: true,
        loading: false,
        title: (image)=>{
          return this.imgsNameList[this.showIndex]+ ' ('+image.naturalWidth+' × '+image.naturalHeight+')'
        },
        url: 'dataSrc',
        zIndex: 9999999, // 设置大一点就好了
        hide:(event)=>{
          this.$emit('hide',this.viewerInstance.index)
        },
        show:(event)=>{
          this.$emit('show',this.viewerInstance.index)
        },
        toolbar: {
          // 下面各种按钮1显示，0隐藏，可自定义按钮大小和点击事件
          zoomIn: 1, // 放大图片
          zoomOut: 1, //缩小图片
          oneToOne: 1, // 图片比例100%
          reset: 1, // 重置图片大小
          prev: 1, // 查看上一张图片
          // prev: ()=>{
          //   this.showIndex--
          //   if(this.showIndex<0) {
          //     this.showIndex = this.imgsList.length
          //   }
          //   this.viewerInstanceChange()
          // }, // 查看上一张图片
          play: 1, // 播放图片
          next: 1,
          // next: ()=>{
          //   this.showIndex++
          //   if(this.showIndex>this.imgsList.length - 1) {
          //     this.showIndex = 0
          //   }
          //   console.log(this.showIndex,11)
          //   this.viewerInstanceChange()
          // },// 查看下一张图片
          rotateLeft: 1,// 向左旋转图片
          rotateRight: 1,// 向右旋转图片
          flipHorizontal: 1,// 图片左右翻转
          flipVertical: 1, // 图片上下翻转
        },
        view:(event) => {
          let url = this.showImgsList[event.detail.index]
          const findIndex = this.imgsList.findIndex(i => i === url)
          if (findIndex > -1) {
            if (this.showIndex === findIndex) {
              return
            }
            this.showIndex = findIndex
            this.$emit('view', this.showIndex)
            this.$nextTick(this.viewerInstanceChange)
          }
        },
      }));  // 存储实例以备将来使用
    } else {
      this.viewerInstance.update()
    }
  },
  watch: {
    imgsList() {
      this.viewerInstanceChange()
    },
    'imgsList.length':{
      handler() {
        this.viewerInstanceChange()
      }
    },
  },
  methods: {
    viewerInstanceChange() {
      if (this.viewerInstance) {
        this.viewerInstance.update()
        let url = this.imgsList[this.showIndex]
        const findIndex = this.showImgsList.findIndex(i => i === url)
        if (findIndex > -1) {
          this.viewerInstance.view(findIndex)
        }
      }
    },
    useCacheImg(){
      return useCacheImg()
    },
    /**
     * 主动调用
     * @param index
     */
    show(index) {
      this.$nextTick(()=>{
        this.showIndex = index
        this.viewerInstanceChange()
      })
    }
  }
})
</script>

<template>
  <div class="displayNone" ref="ulRef">
    <img
      v-for="item in showImgsList"
      :key="item"
      class="displayNone"
      :dataSrc="useCacheImg().getUrl(item)"
      loading="lazy"
      alt="">
  </div>
</template>

<style scoped lang="scss">
.displayNone{
  display: none !important;
}
</style>
